<template>
  <el-dialog
    :modal="false"
    v-dialogDrag
    :close-on-click-modal="false"
    title="说明"
    :visible.sync="isShowDialog"
    width="600px">
    <!-- 具体form表单 -->
    <el-form label-position="right" ref="form"  :model="monitorInfo" label-width="0px"
             class="form_width-200">
      <el-form-item label="" prop="mark">
        <el-input
          type="textarea"
          v-model="monitorInfo.mark"
          placeholder="说明"
          :rows="12"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 操作按钮 -->
    <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="clearValidate">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="submitMark">确定</el-button>
      </span>
  </el-dialog>
</template>

<script>
import { updateMark} from '@/services/model/project-info'
export default {
  data () {
    return {
      // 是否展示弹窗
      isShowDialog: false,
      // 当前表单数据
      monitorInfo: {}
    }
  },
  methods: {
    show (row) {
      this.monitorInfo = row.monitorInfo
      this.isShowDialog = true
    },
    clearValidate(){
      this.isShowDialog = false
    },
    // 说明
    async submitMark () {
      const params = {
        id: this.monitorInfo.id,
        mark: this.monitorInfo.mark
      }
      await updateMark(params)
      this.$message.success('已更新说明')
      this.$emit('update')
      this.isShowDialog = false
    },
  }
}
</script>

<style>
  /*// 覆盖层元素增加可穿透点击事件*/
  .el-dialog__wrapper {pointer-events:none;}
  /*// 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）*/
  .el-dialog {
    pointer-events: auto;
  }
</style>
